import React from 'react'
import {connect} from 'react-redux'

class ImReducerApp extends React.Component{
    constructor(props){
        super(props)
        this.nameRef=React.createRef()
        this.descRef=React.createRef()
    }
    del(item){
        this.props.del(item)
    }
    add(){
        let name=this.nameRef.current.value
        let desc=this.descRef.current.value
        let item={name,desc}
        this.props.add(item)
        this.nameRef.current.value=""
        this.descRef.current.value=""
    }
    render(){
        const {city,region}=this.props.address
        return (
            <div>
               name:{this.props.name}
               age:{this.props.age}
               {city}{region}
               {this.props.hobbies.map(item=><div>{item.get("name")}:{item.get("desc")}<button onClick={e=>{this.del(item)}}>del</button></div>)}
               <input type="text" ref={this.nameRef}/>
               <input type="text" ref={this.descRef}/>
               <button onClick={(e)=>{this.add()}}>add</button>
            </div>
        )
    }
}
function mapStateToProps(state){
    return {
        name:state.get("name"),
        age:state.get("age"),
        address:state.get("address").toJS(),
        hobbies:state.get("hobbies")
    }
}

function mapDispatchToProps(dispatch){
    return {
        del(item){
            dispatch({
                type:"del",
                item:item
            })
        },
        add(item){
            dispatch({
                type:"add",
                item:item
            })
        }
    }
}

export default connect(mapStateToProps,mapDispatchToProps)(ImReducerApp)